<template>
  <el-card>
    <el-row>
      <el-button type="primary" @click="add">
        {{ $t('systemModule.role.add') }}
      </el-button>
    </el-row>
    <el-table
      v-loading="loading"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      :data="tableData"
      border
      :stripe="true"
      class="Top"
      style="width: 100%"
    >
      <el-table-column
        prop="name"
        :label="tableText['roleName']"
        min-width="150"
      />
      <el-table-column
        prop="description"
        :label="tableText['remark']"
        min-width="150"
      />
      <el-table-column
        fixed="right"
        :label="$t('common.operate.name')"
        min-width="100"
      >
        <template slot-scope="scope">
          <el-button size="small" @click="handleClick(scope.row)">{{ $t('common.operate.edit') }}</el-button>
          <el-button type="danger" size="small" @click="deleteItem(scope.row)">{{ $t('common.operate.delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :current-page="searchForm.currentPage"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="searchForm.pageSize"
        :total="totalNumber"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <delete-dialog ref="delete-dialog" :delete-state="deleteState" :loading="deleteLoading" @change-delete="changeDelete" @delete-this="deleteThis" />
    <role-setting :title="title" :show-dialog="editDialog" :tree-data="treeData" :choose-item="chooseItem" @change-dialog="changeDialog" @edit-success="editSuccess" />
  </el-card>
</template>

<script>
import { getRoles, deleteRoles, getAllTreeInfo, getRoleById } from '@/api/system'
import deleteDialog from '@/components/delete/index.vue'
import roleSetting from '@/components/system/roleSetting.vue'
export default {
  name: 'Role',
  components: {
    deleteDialog,
    roleSetting
  },
  data() {
    return {
      loading: true,
      tableData: [],
      deleteState: false,
      deleteLoading: false,
      editDialog: false,
      title: null,
      treeData: null,
      id: null,
      tableText: {},
      totalNumber: 0,
      searchForm: {
        currentPage: 1,
        pageSize: 10
      },
      chooseItem: {
        name: null,
        id: null,
        description: null,
        menuIds: null
      }
    }
  },
  mounted() {
    this.tableText = this.$t('systemModule.role.table')
    this.getData()
    this.getTreeData()
  },
  methods: {
    getData() {
      this.loading = true
      getRoles(this.searchForm)
        .then(res => {
          this.loading = false
          if (res.success) {
            this.tableData = res.data
            this.totalNumber = res.page ? res.page['totalNumber'] : 0
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error(err.message)
        })
    },
    getTreeData() {
      getAllTreeInfo()
        .then(res => {
          if (res.success) {
            this.treeData = this.getTreeNode(res.data)
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.$message.error(err.message)
        })
    },
    // 根据对象渲染Tree
    getTreeNode(tree) {
      const arr = []
      if (!!tree && tree.length !== 0) {
        tree.forEach(item => {
          const obj = {}
          obj.label = item.isButton === 0 ? item['menuDescriptions'][0].description : item['menuDescriptions'][0].description + ` (${this.$t('systemModule.role.operationButton')})`
          if (item['menuDescriptions'][1]) {
            obj.label2 = item['menuDescriptions'][1].description
          }
          obj.id = item.id
          obj.parentId = item.parentId
          obj.url = item.url
          obj.iconPath = item.iconPath
          obj.isButton = item.isButton
          obj.expand = true
          obj.checked = false
          obj.children = this.getTreeNode(item.children)
          arr.push(obj)
        })
      }
      this.loading = false
      return arr
    },
    add() {
      this.title = this.$t('systemModule.role.add')
      this.choose({})
      this.editDialog = true
    },
    changeDialog(param) {
      this.editDialog = param
      setTimeout(() => {
        this.choose({})
      }, 10)
    },
    editSuccess() {
      this.getData()
    },
    choose(param) {
      this.chooseItem.id = param.id
      this.chooseItem.name = param.name
      this.chooseItem.description = param.description
      this.chooseItem.menuIds = param.menuIds ? param.menuIds : []
    },
    handleClick(data) {
      if (this.editDialog) {
        return
      }
      getRoleById(data.id)
        .then(res => {
          if (res.success) {
            const arr = []
            if (res.data['menuDTOS'] && res.data['menuDTOS'].length > 0) {
              res.data['menuDTOS'].forEach(v => {
                arr.push(v.id)
              })
            }
            const obj = {
              id: data['id'],
              name: data['name'],
              description: data['description'],
              phoneNumber: data['phoneNumber'],
              menuIds: arr
            }
            this.title = this.$t('systemModule.role.edit')
            this.choose(obj)
            this.editDialog = true
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.$message.error(err.message)
        })
    },
    changeDelete(param) {
      this.deleteState = param
    },
    deleteItem(data) {
      this.id = data.id
      this.changeDelete(true)
    },
    deleteThis() {
      this.deleteLoading = true
      deleteRoles(this.id)
        .then(res => {
          this.deleteLoading = false
          if (res.success) {
            this.$message.success(this.$t('common.tip.deleteSuccess'))
            this.changeDelete(false)
            this.getData()
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.deleteLoading = false
          this.$message.error(err.message)
        })
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.searchForm.currentPage = val
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table{
  margin-top: 10px;
}
</style>
